<template>
    <div class="doctorDetail">
        <el-button size="small" class="goBack" @click="goBack">返回</el-button>
        <div class="baseInfo">
            <h1>基本信息</h1>
            <el-row>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">医生姓名</label>
                        <el-input v-model="doc_name"></el-input>
                    </div>
                </el-col>

                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">医生编号</label>
                        <el-input v-model="doc_id" :disabled="true"></el-input>
                    </div>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">所属科室</label>
                        <el-select v-model="doc_department" placeholder="请选择">
                            <el-option
                                    v-for="item in departmentList"
                                    :key="item.d_id"
                                    :label="item.d_name"
                                    :value="item.d_name">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">医生电话</label>
                        <el-input v-model="doc_phone" maxlength="50"></el-input>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <div class="grid-content">
                        <label for="">一句介绍</label>
                        <el-input maxlength="18" show-word-limit placeholder="请输入内容" v-model="doc_description">
                        </el-input>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <div class="grid-content">
                        <label style="align-self:flex-start;" for="">擅长</label>
                        <el-input type="textarea" size="small" maxlength="2000" :autosize="{ minRows: 8}"
                                  show-word-limit placeholder="请输入内容" v-model="doc_major">
                        </el-input>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="btn-group" v-if="isdisabled">
            <el-button type="primary" size="small" @click="update">修改</el-button>
            <el-button size="small" @click="fail">放弃</el-button>
        </div>
        <div class="btn-group" v-else>
            <el-button type="primary" size="small" @click="add">新增</el-button>
            <el-button size="small" @click="fail">放弃</el-button>
        </div>
        <div class="popup">
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%">
                <span>是否确定放弃本次操作？</span>
                <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">我再想想</el-button>
        <el-button type="primary" @click="giveup">确定放弃</el-button>
        </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {doctorAdd,doctorUpdate,doctorListGet} from "../../api/doctor";
    import {departmentListGet} from "../../api/department";

    export default {
        name: "detail",
        data() {
            return {
                doc_name: "",
                doc_id: "",
                doc_department: "",
                doc_phone: "",
                doc_description: "",
                doc_major: "",
                departmentList:[],
                dialogVisible: false,
                isdisabled:false
            }
        },

        created() {
            if(this.$route.query.id){
                this.backShow((this.$route.query.id));
                this.isdisabled = true;
            }
            departmentListGet({
                pageIndex:1,
                pageSize:1000,
                d_hospital:sessionStorage.getItem('hospitalId')
            }).then((res=>{
                this.departmentList = res.list;
            }));
        },

        mounted() {

        },

        methods: {
            async backShow(id){
                try{
                    let { list } = await doctorListGet({
                        pageIndex:1,
                        pageSize:1,
                        departCode:id,
                        doc_hospital:sessionStorage.getItem('hospitalId')
                    });
                    this.doc_name = list[0].doc_name;
                    this.doc_id = list[0].doc_id;
                    this.doc_department = list[0].doc_department;
                    this.doc_phone = list[0].doc_phone;
                    this.doc_description = list[0].doc_description;
                    this.doc_major = list[0].doc_major;
                }catch (e) {
                    console.error(e);
                }

            },
            goBack() {
                this.$router.go(-1);
            },
            async update(){
                if(!this.doc_name){
                    this.$message.error('医生名称不能为空！')
                    return
                }
                if(!this.doc_department){
                    this.$message.error('请选择医生所在科室！')
                    return
                }
                try{
                    let res = await doctorUpdate({
                        doc_name:this.doc_name,
                        doc_id:this.doc_id,
                        doc_phone:this.doc_phone,
                        doc_department:this.doc_department,
                        doc_description:this.doc_description,
                        doc_major:this.doc_major,
                        doc_hospital:sessionStorage.getItem('hospitalId')
                    })
                    if(res){
                        this.$message.success(res.msg)
                        setTimeout(()=>{
                            this.$router.push({
                                path: "/doctorManage"
                            });
                        },100)
                    }
                    console.log(res)
                }catch (e) {
                    console.error(e)
                }
            },
            async add(){
                if(!this.doc_name){
                    this.$message.error('医生名称不能为空！')
                    return
                }
                if(!this.doc_department){
                    this.$message.error('请选择医生所在科室！')
                    return
                }
                try{
                    let res = await doctorAdd({
                        doc_name:this.doc_name,
                        doc_phone:this.doc_phone,
                        doc_department:this.doc_department,
                        doc_description:this.doc_description,
                        doc_major:this.doc_major,
                        doc_hospital:sessionStorage.getItem('hospitalId')
                    })
                    if(res){
                        this.$message.success(res.msg)
                        setTimeout(()=>{
                            this.$router.push({
                                path: "/doctorManage"
                            });
                        },100)
                    }
                }catch (e) {
                    console.error(e)
                }
            },
            fail() {
                this.dialogVisible = true
            },
            giveup(){
                this.dialogVisible = false
                this.$router.push({
                    path: "/doctorManage"
                });
            },
        },
    }
</script>

<style scoped lang='scss'>
    .doctorDetail {
        padding: 0 20px 20px 20px;

        .baseInfo {
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            padding-bottom: 10px;
            margin: 20px 0 0 0;
            color: #2c3e50;
            font-weight: bold;

            & > h1 {
                padding: 0 20px;
                line-height: 50px;
                font-size: 16px;
                font-weight: bolder;
                border-bottom: 1px solid #e8eaec;
            }

            .el-row {
                width: 100%;
                margin: 15px 0;
                display: flex;
                padding: 0 20px 0 0;

                .el-col {
                    .grid-content {
                        display: flex;
                        align-items: center;

                        label {
                            display: inline-block;
                            flex: 0 0 70px;
                            padding-left: 12px;
                            padding-right: 8px;
                            width: 70px;
                        }

                        .icon-uploader {
                            width: 80px;
                            height: 80px;
                            border: 1px dashed #ccc;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                            text-align: center;

                            .el-upload {
                                width: 80px;
                                height: 80px;

                                img {
                                    width: 80px;
                                    height: 80px;
                                }
                            }
                        }

                        .icon-uploader:hover {
                            border: 1px dashed #409eff;
                        }

                        .icon-uploader:hover span {
                            color: #409eff;
                        }

                        span {
                            color: #ccc;
                            display: block;
                            font-size: 12px;
                            line-height: 80px;
                        }

                        .pic-uploader {
                            width: 176px;
                            height: 80px;
                            border: 1px dashed #ccc;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                            text-align: center;

                            .el-upload {
                                width: 176px;
                                height: 80px;

                                img {
                                    width: 176px;
                                    height: 80px;
                                }
                            }
                        }

                        .pic-uploader:hover {
                            border: 1px dashed #409eff;
                        }

                        .pic-uploader:hover span {
                            color: #409eff;
                        }

                        span {
                            color: #ccc;
                            display: block;
                            font-size: 12px;
                            line-height: 80px;
                        }
                    }
                }
            }
        }

        .btn-group {
            margin-top: 20px;
            text-align: right;
        }
    }
</style>